﻿import React, { Component} from 'react'
import { observer, inject } from 'mobx-react'

import '@/less/style.less';

@inject('rootStore')
@observer
class PanelMode extends Component {
	constructor(props) {
		super(props);
		this.state={
			select:true,
			move:false,
			scale:false,
			edit:false
		}
	}
	active(mode, proxy){
		proxy.stopPropagation();
		this.props.rootStore.operationModeChange(mode)
	}
	componentDidMount(){
		const {rootStore} = this.props
		let { inputStatus,currentNode }= rootStore;
		let _this= this
		$(window).on('keypress',(e)=>{
			setTimeout(()=>{
				if(inputStatus) return
				switch(e.key){
					case 's': //选择
						rootStore.operationModeChange('select')
						break;
					case 'r': //缩放
						if(currentNode.isRoot)return
						this.props.rootStore.operationModeChange('scale')
						break;
					case 'w': //移动
						if(currentNode.isRoot)return
						rootStore.operationModeChange('move')
						break;
					case 'd': //绘制
						rootStore.operationModeChange('draw')
						break;
				}
			},0)
		})
	}
	componentWillReceiveProps(nextProp){
		let { operationMode, currentDom, currentNode, tag, nodeTree, currentPath } = nextProp
	}	
	render() {
		let { operationMode } = this.props.rootStore;
		return (
			<ul className="panel-mode">
				<li className={"fa fa-mouse-pointer "+(operationMode=='select' ? "active":"")} 
					onClick={this.active.bind(this,"select")}>
				</li>
				<li className={"fa fa-pencil "+(operationMode=='draw' ? "active":"")} 
					onClick={this.active.bind(this,"draw")}>
				</li>
				<li className={"fa fa-arrows "+(operationMode=='move' ? "active":"")} 
					onClick={this.active.bind(this,"move")}>
				</li>
				<li className={"fa fa-expand "+(operationMode=='scale' ? "active":"")} 
					onClick={this.active.bind(this,"scale")}>
				</li>
				<li className={"fa fa-edit "+(operationMode=='edit' ? "active":"")} 
					onClick={this.active.bind(this,"edit")}>
				</li>
			</ul>
		)
	}
}

PanelMode.defaultProps = {
	operationMode: "select"
};

export default PanelMode
